<script setup lang="ts">
import { ref } from "vue";
import D3BarChart from "@/components/chart/D3/D3BarChart.vue";
import D3LineChart from "@/components/chart/D3/D3LineChart.vue";
import D3PieChart from "@/components/chart/D3/D3PieChart.vue";
import D3RadarChart from "@/components/chart/D3/D3RadarChart.vue";

const tabIndex = ref(0);

const chartData = ref([25, 40, 60, 90, 150]);
const pieData = ref([
  { label: "产品A", value: 35, color: "#4e79a7" },
  { label: "产品B", value: 25, color: "#f28e2b" },
  { label: "产品C", value: 20, color: "#e15759" },
  { label: "产品D", value: 15, color: "#76b7b2" },
  { label: "产品E", value: 5, color: "#59a14f" },
]);

const dimensions = ['速度', '力量', '耐力', '敏捷', '技巧', '智力'];

const radarData = [
  {
    name: '玩家A',
    values: {
      速度: 85,
      力量: 75,
      耐力: 90,
      敏捷: 80,
      技巧: 70,
      智力: 60
    }
  },
  {
    name: '玩家B',
    values: {
      速度: 70,
      力量: 90,
      耐力: 75,
      敏捷: 60,
      技巧: 85,
      智力: 80
    }
  }
];
</script>
<template>
  <div class="p-1.5">
    <section class="flex gap-3.5 mb-3.5">
      <div class="panel border p-5 bg-white dark:bg-dark-bg border-rounded-2xl w-1/4">
        <h3 class="text-lg font-bold mb-2">分析</h3>
        <ul>
          <li class="flex justify-between py-1.5 text-xl items-center">
            2,000
            <span
              class="i-codicon-list-ordered text-icon mr-1 text-2xl"
              style="color: #000"
            ></span>
          </li>
          <li class="flex justify-between py-1.5 text-lg items-center">
            总用户量
            <span class="text-sm">120,000</span>
          </li>
        </ul>
      </div>
      <div class="panel border p-5 bg-white dark:bg-dark-bg border-rounded-2xl w-1/4">
        <h3 class="text-lg font-bold mb-2">分析</h3>
        <ul>
          <li class="flex justify-between py-1.5 text-xl items-center">
            2,000
            <span
              class="i-codicon-list-ordered text-icon mr-1 text-2xl"
              style="color: #000"
            ></span>
          </li>
          <li class="flex justify-between py-1.5 text-lg items-center">
            总用户量
            <span class="text-sm">120,000</span>
          </li>
        </ul>
      </div>
      <div class="panel border p-5 bg-white dark:bg-dark-bg border-rounded-2xl w-1/4">
        <h3 class="text-lg font-bold mb-2">分析</h3>
        <ul>
          <li class="flex justify-between py-1.5 text-xl items-center">
            2,000
            <span
              class="i-codicon-list-ordered text-icon mr-1 text-2xl"
              style="color: #ccc"
            ></span>
          </li>
          <li class="flex justify-between py-1.5 text-lg items-center">
            总用户量
            <span class="text-sm">120,000</span>
          </li>
        </ul>
      </div>
      <div class="panel border p-5 bg-white dark:bg-dark-bg border-rounded-2xl w-1/4">
        <h3 class="text-lg font-bold mb-2">分析</h3>
        <ul>
          <li class="flex justify-between py-1.5 text-xl items-center">
            2,000
            <span
              class="i-codicon-list-ordered text-icon mr-1 text-2xl"
              style="color: #000"
            ></span>
          </li>
          <li class="flex justify-between py-1.5 text-lg items-center">
            总用户量
            <span class="text-sm">120,000</span>
          </li>
        </ul>
      </div>
    </section>
    <section class="p-2.5 mb-3.5 bg-white rounded-lg shadow-md border">
      <div class="flex">
        <ul
          class="flex justify-between items-center bg-gray-100 px-1.5 py-1 rounded-lg gap-1.5 cursor-pointer"
        >
          <li
            class="px-2 rounded-lg py-1.5 px-3.5"
            :class="tabIndex == 0 ? 'bg-white' : ''"
            @click="tabIndex = 0"
          >
            流量趋势
          </li>
          <li
            class="px-2 rounded-lg py-1.5 px-3.5"
            :class="tabIndex == 1 ? 'bg-white' : ''"
            @click="tabIndex = 1"
          >
            月访问量
          </li>
        </ul>
      </div>
      <div>
        <template v-if="tabIndex == 0">
          <D3BarChart :data="chartData" :width="500" :height="300"
        /></template>
        <template v-if="tabIndex == 1">
          <D3LineChart :data="chartData" :width="500" :height="300" 
              :showFillBg="true"
        /></template>
      </div>
    </section>
    <section class="flex gap-3.5">
      <div class="panel border p-5 bg-white dark:bg-dark-bg border-rounded-2xl w-1/3">
        <div class="pb-3"><h3>数量</h3></div>
        <div style="height: 250px;">
          <D3RadarChart
            :data="radarData"
            :dimensions="dimensions"
            width="500"
            height="250"
            :margin="{ top: 20, right: 20, bottom: 30, left: 40 }"
          />
        </div>
      </div>

       <div class="panel border p-5 bg-white dark:bg-dark-bg border-rounded-2xl w-1/3">
        <div class="pb-3"><h3>数量</h3></div>
        <div style="height: 17rem">
          <D3PieChart
            :data="pieData"
            :isNightingale="false"
            :showGuideLine="false"
            :innerRadiusRatio="0.63"
             theme="dark"
              :highlightColor="'#cccccc67'"
            :margin="{ top: 20, right: 20, bottom: 30, left: 40 }"
          />
        </div>
      </div>
       <div class="panel border p-5 bg-white dark:bg-dark-bg border-rounded-2xl w-1/3">
        <div class="pb-3"><h3>数量</h3></div>
        <div style="height: 17rem">
          <D3PieChart
            :data="pieData"
            :isNightingale="true"
            :showGuideLine="true"
            :innerRadiusRatio="0"
             theme="dark"
              :highlightColor="'#cccccc67'"
            :margin="{ top: 20, right: 20, bottom: 30, left: 40 }"
          />
        </div>
      </div>
    </section>
  </div>
</template>
